<template>
  <div class="import-page el-card box-b p8 w h  over-a-y">
    <div class="w f-b">
      <div class="w f-s-w">
        <div class="el-card m-b6 box-b p5 first-card">
          <div class="page-title">
            创建信息
          </div>
          <div class="info-box">
            <page-text class="w5" label="数据集ID" :text="collectionInfo?.photo?.id"></page-text>
            <page-text class="w5" label="版本号" text="v1"></page-text>
            <page-text class="w5" label="历史数据">
              <el-button type="text" @click="getHistory">查看历史记录</el-button>
            </page-text>
            <!-- <page-text class="w" label="备注">
              {{ collectionInfo?.photo?.remark||'-' }}
            </page-text> -->
          </div>
        </div>
        <div class="el-card m-b6 box-b p5  first-card">
          <div class="page-title">
            标注信息
          </div>
          <div class="info-box">
            <page-text class="w" label="标注类型" :text="markTypeString"></page-text>
            <page-text class="w5" label="标注总数量" :text="collectionInfo.num || '0'"></page-text>
            <!-- <page-text class="w5" label="大小" text="1.06M"></page-text> -->
            <page-text class="w5" label="标注个数" :text="collectionInfo.finish || '0'"></page-text>
          </div>
        </div>
        <div class="el-card m-b6 box-b p5  first-card">
          <div class="page-title">
            数据清洗
          </div>
          <div class="info-box">
            <page-text class="w c8 p-l10" label="" text="">
              <template #content>暂未做过数据清洗任务</template>
            </page-text>
          </div>
        </div>
        <div class="el-card m-b6 box-b p5  first-card">
          <div class="page-title">
            数据增强
          </div>
          <div class="info-box">
            <page-text class="w c8 p-l10" label="" text="">
              <template #content>暂未做过数据增强任务</template>
            </page-text>
          </div>
        </div>
      </div>
    </div>
    <div class="w box-b p-r10">
      <div class="el-card m-b6 box-b p5">
        <div class="page-title">
          导入数据
        </div>
        <div class="info-box">
          <lm-form :ref="editFormRefKey" inline label-width="120px" class="lm-w lm-h" :layout="layout" v-model="editForm">
            <template #importType="{ form, item, layout }">
              <div class="w f-s a-i-c">
                <el-select v-model="editForm[item.prop][0]" placeholder="请选择">
                  <el-option v-for="(item, i) in importTypeList1" :key="i" v-bind="item"></el-option>
                </el-select>
                <el-select v-model="editForm[item.prop][1]" placeholder="请选择">
                  <el-option v-for="(item, i) in importTypeList2" :key="i" v-bind="item"></el-option>
                </el-select>
              </div>
            </template>
            <template #file="{ form, item, layout }">
              <div class="w bor-i box-b p6 r4">
                <el-upload ref="upload-box" v-model:file-list="fileList" :auto-upload="false" :list-type="'picture'"
                  class="upload-demo" drag action="#" multiple accept="image/jpg,image/png,image/bmp,image/jpeg">
                  <el-icon class="el-icon--upload">
                    <upload-filled />
                  </el-icon>
                  <div class="el-upload__text">
                    拖拽 <em>点击</em>上传
                  </div>
                  <template #tip>
                    <div class="el-upload__tip c7">
                      <div class="h-26"> 1.图片类型为jpg/png/bmp/jpeg，单次上传限制100个文件 </div>
                      <div class="h-26">2.图片大小限制在14M内，长宽比在3:1以内，其中最长边需要小于4096px，最短边需要大于30px</div>
                      <div class="h-26"> 3.您的账户下图片数据集大小限制为10万张图片，如果需要提升数据额度，可在平台提交工单</div>
                    </div>
                  </template>
                </el-upload>
              </div>
              <!-- <upload-image class="w-100 b-i1 m-b3 r2 bor-p p-t6 p-b6 p-l10 p-r10"
                style="border-color:azure" :upload-path="uploadImagePath" :is-success="true"
                @uploadSuccess="uploadSuccess" @uploadError="uploadError">
                <el-button type="text" icon="upload">上传图片</el-button>
              </upload-image> -->
            </template>
          </lm-form>

        </div>
      </div>
    </div>
    <!-- <div class="w box-b p-r10">
      <div class="el-card m-b6 box-b p5">
        <div class="page-title">
          关联标签组
        </div>
        <div class="f-s a-i-c">
          <span>标签组:&nbsp;</span>
          <el-select v-model="tagGroupSelected">
            <el-option v-for="(op,o) in tagGroupList" :key="o" v-bind="op"></el-option>
          </el-select>
        </div>
      </div>
    </div> -->
    <div class="w box-b p-r10 f-e box-b p-r10 m-r10">
      <el-button v-loading="saveLoading" type="primary" size="large" @click="submit">完成</el-button>
      <el-button type="primary" size="large" @click="goBackToPage()" plain>取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { PageText, ElIconRender } from '@/importComponents'
import uploadImage from '@/components/upload-image/index.vue'
import frameProperty from '@/mixins/frame-property'
import { type RequestCode } from '@/server/base'
import { TagGroup } from '@/apis/tag'
import { type ValidateFieldsError } from 'async-validator'
import { Collection } from '@/apis/collection'
import { UploadFile, UploadFiles } from 'element-plus'

export default {
  name: 'importCollection',
  mixins: [frameProperty],
  components: { PageText, ElIconRender, uploadImage },
  data() {
    return {
      editFormRefKey: 'importCollectionRef',
      layout: [
        {
          prop: 'state',
          label: '数据标注状态',
          type: 'radio-button',
          required: true,
          clearable: true,
          itemClass: 'column_1',
          options: [
            { value: 0, label: '无标注信息' },
            { value: 1, label: '有标注信息' }
          ],
          value: 0
        },
        {
          prop: 'importType',
          label: '导入方式',
          type: 'slot',
          required: true,
          clearable: true,
          itemClass: 'column_1'
        },
        {
          prop: 'file',
          label: '上传图片',
          type: 'slot',
          clearable: true,
          itemClass: 'column_1'
        },
        {
          prop: 'type',
          label: '导入标注格式',
          type: 'radio-button',
          required: true,
          clearable: true,
          itemClass: 'column_1',
          options: [
            { value: 'YOLO', label: 'YOLO格式' },
            { value: 'VOC', label: 'VOC格式' },
            { value: 'COCO', label: 'COCO格式' }
          ],
          value: 'YOLO'
        },
        {
          prop: 'labelGroupId',
          label: '关联标签组',
          type: 'select',
          required: true,
          clearable: true,
          itemClass: 'column_1',
          options: []
        }
      ],
      editForm: {
        state: 0,
        importType: ['1', '1']
      } as any,

      importTypeList1: [
        { label: '本地导入', value: '0' },
        { label: '平台已有数据', value: '1' },
        { label: '摄像头采集数据', value: '2' },
        { label: '云服务回流数据', value: '3' }
      ],
      importTypeList2: [
        { label: '图片', value: '1' },
        { label: '压缩包', value: '2' }
      ],

      fileList: [],

      uploadImagePath: '',
      uploadImageFileList: [] as any[],

      saveLoading: false,
      // tagGroupList: [],
      // tagGroupSelected: ''

    }
  },
  computed: {
    collectionInfo() {
      return this.getParamsByString((this as any).$route.params.value)
    },
    markTypeString() {
      return ['', '图像分类', '图像分隔', '图形识别'][+this.collectionInfo?.photo?.type]
    },
    photoListId() {
      return this.collectionInfo?.photo?.id || this.collectionInfo?.photoListId;
    }
  },
  methods: {
    /**
     * 查询标签组
     */
    getTagGroupList() {
      const findIndex = this.layout.findIndex(
        (item: { prop: string }) => item.prop == 'labelGroupId'
      )
      if (findIndex < 0) {
        return
      }
      TagGroup.list({ keyword: '', current: 1, size: 10000 })
        .then((res: RequestCode) => {
          const { records } = res.data
          this.layout[findIndex].options = records.map(
            ({ id, name }: { id: string; name: string }) => {
              return { label: name, value: id + '' }
            }
          )
        })
        .catch(() => { })
    },
    /**
     * 上传成功返回数据操作函数
     */
    uploadSuccess(obj: { path: string } | any) {
      if (!obj || !obj.path) {
        return
      }
      this.uploadImageFileList.push(obj)
    },
    uploadError(error?: any) { },
    getHistory() {
      this.dialogPagePush({
        name: 'collectionHistory',
        params: { isEdit: true, value: '{}' }
      })
    },
    saveInfo() {
            this.fileList?.forEach((item:any)=>{
        let  img :any = new Image()
        img.src=item.url
        item.height=img.height
        item.width=img.width
      })
      this.saveLoading = true;
      (this as any).$message.info('正在上传，中间时间较长，请耐心等待!');
      const { file, importType, ...params } = this.editForm
      params.importMethod = importType[0]
      params.photoListId = this.photoListId
      //获取图片
      params.file = this.fileList.map(
        (item: {
          name: string
          percentage: number
          status: string
          size: number
          raw: any
          uid: number
          url: string
          height:number
          width:number
        }) => ({ raw: item.raw, name: item.name , height:item.height , width:item.width})
      )
      Collection.saveUploadPhoto(params).then((res: any) => {
        this.saveLoading = false;
        ; (this as any).$message({ type: 'success', message: '操作完成！' })
        this.$router.push({ name: 'dataManage' })
      }).catch(() => {
        this.saveLoading = false;
      })
    },
    //验证数据
    submit() {
      if (!this.fileList || this.fileList.length <= 0) {
        ; (this as any).$message.error('请上传图片！')
        return
      }
      const editFormRef = this.$refs[this.editFormRefKey] as any

      editFormRef.validate((isValid: boolean, invalidFields?: ValidateFieldsError) => {
        if (!isValid) {
          //滚动到未通过校验的字段
          if (invalidFields && Object.keys(invalidFields).length > 0) {
            editFormRef.scrollToField(Object.keys(invalidFields)[0])
          }
          return
        }
        this.saveInfo()
      })
    },
    goBackToPage() {
      this.$router.push({ name: 'dataManage' })
    }
  },
  created() {
    this.getTagGroupList()
  }
}
</script>

<style lang="scss" scoped>
.import-page {
  .page-title {
    border-left: 4px solid #087edf;
    margin: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 8px;
    @extend .w, .m-t10;
    font-size: 16px;
  }

  .first-card {
    background: #f7f7f7;
    width: 24%;
    margin-right: 10px;
  }

  .info-box {
    @extend .f-b-w, .w;
  }
}
</style>
<style lang="scss"  >
.el-upload-list {
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;

  .el-upload-list__item {
    width: 140px !important;
    @extend .els;
  }
}
</style>